<template>
  <div class="header-container">
    <div class="wrapper">
      <!-- logo -->
      <div class="left-wrapper v-link selected">
        <img style="width: 50px" width="50" height="50" src="~assets/images/logo.png">
        <span class="text">小霸王 预约挂号统一平台</span>
      </div>
      <!-- 搜索框 -->
      <div class="search-wrapper">
        <div class="hospital-search animation-show">
          <el-autocomplete
            class="search-input small"
            prefix-icon="el-icon-search"
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="点击输入医院名称"
            @select="handleSelect"
          >
            <span slot="suffix" class="search-btn v-link highlight clickable selected">搜索 </span>
          </el-autocomplete>
        </div>
      </div>
      <!-- 右侧 -->
      <!-- 右侧 -->
      <div class="right-wrapper">
        <span class="v-link clickable">帮助</span>
        <span v-if="name == ''" class="v-link clickable" @click="showLongin" id="loginDialog">登录/注册</span>
        <el-dropdown v-if="name != ''" @command="loginMenu">
                <span class="el-dropdown-link">
                  {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
          <el-dropdown-menu class="user-name-wrapper" slot="dropdown">
            <el-dropdown-item command="/user">实名认证</el-dropdown-item>
            <el-dropdown-item command="/order">挂号订单</el-dropdown-item>
            <el-dropdown-item command="/patient">就诊人管理</el-dropdown-item>
            <el-dropdown-item command="/logout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 登录弹出层 -->
    <el-dialog :visible.sync="dialogUserFormVisible" style="text-align: left;" top="40px" :append-to-body="true"
               width="960px" @close="closeDialog()">
      <div class="container">

        <!-- 手机登录 #start -->
        <div class="operate-view" v-if="dialogAtrr.showLoginType === 'phone'">
          <div class="wrapper" style="width: 100%">
            <div class="mobile-wrapper" style="position: static;width: 60%">
              <span class="text">{{ dialogAtrr.labelTips }}</span>
              <el-form>
                <el-form-item>
                  <el-input v-model="dialogAtrr.inputValue" :placeholder="dialogAtrr.placeholder"
                            :maxlength="dialogAtrr.maxlength" class="input v-input">
                    <span slot="suffix" class="sendText v-link" v-if="dialogAtrr.second > 0">{{
                        dialogAtrr.second
                      }}s </span>
                    <span slot="suffix" class="sendText v-link highlight clickable selected"
                          v-if="dialogAtrr.second == 0" @click="getCodeFun()">重新发送 </span>
                  </el-input>
                </el-form-item>
              </el-form>
              <div class="send-button v-button" @click="btnClick()"> {{ dialogAtrr.loginBtn }}</div>
            </div>
            <div class="bottom">
              <div class="wechat-wrapper" @click="weixinLogin()"><span
                class="iconfont icon"></span></div>
              <span class="third-text"> 第三方账号登录 </span></div>
          </div>
        </div>
        <!-- 手机登录 #end -->

        <!-- 微信登录 #start -->
        <div class="operate-view" v-if="dialogAtrr.showLoginType == 'weixin'">
          <div class="wrapper wechat" style="height: 400px">
            <div>
              <div id="weixinLogin"></div>
            </div>
            <div class="bottom wechat" style="margin-top: -80px;">
              <div class="phone-container">
                <div class="phone-wrapper" @click="phoneLogin()"><span
                  class="iconfont icon"></span></div>
                <span class="third-text"> 手机短信验证码登录 </span></div>
            </div>
          </div>
        </div>
        <!-- 微信登录 #end -->

        <div class="info-wrapper">
          <div class="code-wrapper">
            <div><img src="//img.114yygh.com/static/web/code_login_wechat.png" class="code-img">
              <div class="code-text"><span class="iconfont icon"></span>微信扫一扫关注
              </div>
              <div class="code-text"> “快速预约挂号”</div>
            </div>
            <div class="wechat-code-wrapper"><img
              src="//img.114yygh.com/static/web/code_app.png"
              class="code-img">
              <div class="code-text"> 扫一扫下载</div>
              <div class="code-text"> “预约挂号”APP</div>
            </div>
          </div>
          <div class="slogan">
            <div>xxxxxx官方指定平台</div>
            <div>快速挂号 安全放心</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const deaultDialogAtrr = {
  //控制手机登录与微信登录切换
  showLoginType: 'phone',
  //输入框提示
  labelTips: '邮箱号码',
  //输入框绑定对象
  inputValue: '',
  //输入框占位符
  placeholder: '请输入您的邮箱',
  //输入框长度控制
  maxlength: 20,
  //登录按钮或获取验证码
  loginBtn: '获取验证码',
  //是否可以发送验证码
  sending: true,
  // 倒计时间  second>0 --》显示倒计时  second=0  --》重新发送 second=-1 --》什么都不显示
  second: -1,
  // 倒计时定时任务引用 关闭登录层清除定时任务
  clearSmsTime: null
}
import cookie from 'js-cookie'
import smsApi from '../api/sms'
import userInfoApi from "../api/userInfo";
import Vue from 'vue'
import weixinApi from '../api/user/wexin'

export default {
  name: "Header",
  data() {
    return {
      userInfo: {
        phone: '',
        code: '',
        openid: ''
      },
      dialogUserFormVisible: false,
      //弹出层相关属性
      dialogAtrr: deaultDialogAtrr,
      //用户登录显示的名称
      name: ''
    }
  },
  mounted() {
  //  注册全局登录事件对象
    window.loginEvent =new Vue();
  //  监听登录事件
    loginEvent.$on('loginDialogEvent',function (){
      document.getElementById('loginDialog').click()
    })
  //  触发事件 显示登录层
  //  初始化微信 js
    const  script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
    document.body.appendChild(script)
  //  微信回调处理
    let self  =this
    window['loginCallback'] = (name,token,openid) =>{
      self.loginCallback(name,token,openid);
    }
  },
  created() {
    this.showInfo()
  },
  methods: {
    //添加微信登录方法
    loginCallback(name,token,openid){
      if(openid != ''){
        this.userInfo.openid = openid
        this.showLongin()
      }else{
        this.setCookies(name,token)
      }
    },
    /*绑定登录或获取验证码按钮*/
    btnClick() {
      cookie.set('haha',JSON.stringify('你好'),{domain:'localhost'})
      if (this.dialogAtrr.loginBtn == '获取验证码') {
        this.userInfo.phone = this.dialogAtrr.inputValue
        //  获取验证码
        this.getCodeFun()
      } else {
        //登录
        this.login()
      }
    },
    //获取验证码
    getCodeFun() {
      if (!(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.userInfo.phone))) {
        this.$message.error({
          message: '邮箱格式错误',
          duration: 1500
        })
        return;
      }
      this.timeDown();
      //  初始化验证码相关的属性
      this.dialogAtrr.inputValue = ''
      this.dialogAtrr.placeholder = '请输入验证码'
      this.dialogAtrr.maxlength = 4
      this.dialogAtrr.loginBtn = '马上登录'
      //  控制重复发送
      this.dialogAtrr.sending = false;
      smsApi.sendMailCode(this.userInfo.phone).then(
        res => {
          if (res.data.code == 200) {
            return;
          }
          this.$message.error(res.data.message)
          this.showLongin()
        })
    },
    timeDown() {
      if (this.dialogAtrr.clearSmsTime) {
        clearInterval(this.dialogAtrr.clearSmsTime)
      }
      this.dialogAtrr.second = 60
      this.dialogAtrr.labelTips = '验证码已发送'
      this.dialogAtrr.clearSmsTime = setInterval(
        () => {
          --this.dialogAtrr.second
          if (this.dialogAtrr.second < 1) {
            clearInterval(this.dialogAtrr.clearSmsTime);
            this.dialogAtrr.sending = true
            this.dialogAtrr.second = 0
          }
        }, 1000)
    },
    //关闭登录层
    closeDialog() {
      if (this.dialogAtrr.clearSmsTime) {
        clearInterval(this.dialogAtrr.clearSmsTime)
      }
    },
    //绑定登录，点击显示登录层
    showLongin() {
      this.dialogUserFormVisible = true
      //  初始化登录层相关参数
      this.dialogAtrr = {...deaultDialogAtrr}
    },
    //查看是否存在用户
    showInfo() {
      let token = cookie.get('token')
      if (token) {
        this.name = cookie.get('name')
        console.log(this.name)
      }
    },
    //登录
    login() {
      console.log("验证码"+this.userInfo.code)
      console.log()
      //将用户输入的验证码   赋值给 code
      this.userInfo.code = this.dialogAtrr.inputValue
      if (this.dialogAtrr.loginBtn == "正在提交...") {
        this.$message.error('重复提交')
        return
      }
      if (this.userInfo.code == '' || this.userInfo.code.length != 4) {
        this.$message.error('请输入正确验证码')
        return;
      }
      this.dialogAtrr.loginBtn = '正在提交...'
      userInfoApi.login(this.userInfo).then(
        res => {
          if (res.data.code == 200) {
            this.setCookies(res.data.data.name, res.data.data.token)
            return
          }
          this.dialogAtrr.loginBtn = '马上登录'
        })
    },
    setCookies(name, token) {
      cookie.set('token', token, {domain: 'localhost'})
      cookie.set('name', name, {domain: 'localhost'})
      window.location.reload()
    },
    // 搜索框绑定的方法
    handleSelect(item) {
      window.location.href = '/hospital/' + item.hoscode
    },
    //手机登录
    phoneLogin() {
      this.dialogAtrr.showLoginType = 'phone'
      this.showLongin();
    },
    weixinLogin(){
      this.dialogAtrr.showLoginType ='weixin'
      weixinApi.getLoginParam().then(
        res =>{
            if(res.data.code == 200){
              var obj  = new wxLogin({
                self_redirect:true,
                // 需要显示的容器id
                id: 'weixinLogin',
                appid:res.data.data.appid,
                scope:res.data.data.scope,
                redirect_uri: res.data.data.redirectUri,
                state:res.data.state,
                style:'black',
                href:''
              })
            }
        })
    },
    // 登录 后的菜单
    loginMenu(command){
      if('/logout' == command){
        cookie.set('name','',{domain:'localhost'})
        cookie.set('token','',{domain:'localhost'})
      //  跳转页面
        window.location.href ='/'
      }else {
        window.location.href =command
      }
    }
  }
}
</script>

<style scoped>

</style>
